<template>
    <div class="main">
                                  <div class="commenNav">
            <div class="stockNav" @click='backLeaveStorage'>
                <div class="stockIcon"></div>
                <div>出库管理</div>
            </div>
            <div class="catalogBox">
                <ul>
                    <li>
                        <span class="catalogIcon"></span><span class="catalogClass">出库文件上传</span>
                    </li>
                </ul>
            </div>
        </div>
                <div class="basicInfo">
                    <div>
                        <div class="box"><span style="float:left;color:#999;">出库文件上传</span>
                        <span style="float:right" :class="{colorRedFont:iscolorRedFont_1}">出库编号：</span></div>
                        <div><input type="text" style="width:320px;" maxlength='30' v-model='leaveWarehouseNumber' :class="{colorRedBorder:iscolorRedBorder_1}"></div>
                        <div v-show="warning_1" class="warnStyle">{{warn_1}}</div>
                    </div>
                     <div>
                        <div class="box"><span :class="{colorRedFont:iscolorRedFont_2}">出库负责人：</span></div>
                        <div><input type="text" maxlength='10' v-model='leaveWarehouseManager':class="{colorRedBorder:iscolorRedBorder_2}"></div>
                        <div v-show="warning_2" class="warnStyle">{{warn_2}}</div>
                    </div>
                    <div>
                        <div class="box"><span :class="{colorRedFont:iscolorRedFont_3}">出库时间：</span></div>
                        <div class="pickBox" :class="{colorRedBorder:iscolorRedBorder_3}">
                            <el-date-picker v-model="leaveWarehouseDate"type="datetime"placeholder="选择日期时间" :editable='false'></el-date-picker>
                        </div>
                        <div v-show="warning_3" class="warnStyle">{{warn_3}}</div>
                    </div>
                    <div class="lastBox">
                        <div class="box"></div>
                        <div><input type="text" style="width:320px;" :class="{colorRedBorder:iscolorRedBorder_4}" v-model='fileName' disabled>
                        <input type="file" id='upload' style="display:none" @change='handleFile'><label for="upload" class="uploadButton">文件上传</label>
                        <span v-show="warning_4" class="warnStyle" style="padding-left:40px;display:inline-block;">{{warn_4}}</span>
                        </div>
                    </div>
                
           
                    <div>
                        <div class="box"><span style="float:left;color:#999;" >出库信息</span>
                        <span style="float:right" :class="{colorRedFont:iscolorRedFont_5}">发出方：</span></div>
                        <div><input type="text" style="width:320px;"v-model='sendCompany':class="{colorRedBorder:iscolorRedBorder_5}" disabled></div>
                        <div v-show="warning_5" class="warnStyle">{{warn_5}}</div>
                    </div>
                     <div class='lastBox'>
                        <div class="box"><span :class="{colorRedFont:iscolorRedFont_6}">出库类型：</span></div>
                        <div class="selectPickBox1" :class="{colorRedBorder:iscolorRedBorder_6}">
                           <el-select v-model="leaveWarehouseType" placeholder="请选择" clearable>
                            <el-option v-for="item in outStockType" :label="item.label":value="item.value" :key='item.id'>
                            </el-option>
                          </el-select>
                        </div>
                        <div v-show="warning_6" class="warnStyle">{{warn_6}}</div>
                    </div>
             
                
                    <div class="lastBox">
                        <div class="box"><span style="float:left;color:#999;">收货方信息</span>
                        <span style="float:right" :class="{colorRedFont:iscolorRedFont_7}">收货方名称：</span></div>
                        <div class="selectPickBox2" :class="{colorRedBorder:iscolorRedBorder_7}">
                               <el-select v-model="distributorId" placeholder="请选择" clearable>
                            <el-option v-for="item in companyName" :label="item.name":value="item.id" :key='item.id'>
                            </el-option>
                          </el-select>
                        </div>
                        <div v-show="warning_7" class="warnStyle">{{warn_7}}</div>
                    </div>
                     <div>
                    <button class="button" @click='save' :disabled='saveBtn'>保存</button>
                </div>
</div>
                                       <!--提示框-->
        <div id="tipMsg" v-show="istipMsg">
            <div class="approval-leave-bg">
                <div class="tipBox">
                    <div>
                        <p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
                    </div>
                    <div>
                        <p style="padding:40px 0;text-align: center;width:100%;">已编辑的内容未保存，确定进行其他操作？</p>
                        <div class="yesNo">
                            <input type="button" value="取消" id="yes" @click="cancle">
                            <input type="button" value="确定" id="no" @click="changePath">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                outStockType: [{
                    value: 1,
                    label: '销售出库'
                }, {
                    value: 2,
                    label: '销毁出库'
                }, {
                    value: 3,
                    label: '零售出库'
                }],
                companyName: [],
                sendCompany: sessionStorage.companyName,
                leaveWarehouseType: '',
                leaveWarehouseNumber: '',
                leaveWarehouseManager: '',
                leaveWarehouseDate: new Date().getTime(),
                fileName: '',
                distributorId: '',
                fileName: '',
                file: null,
                upload: false,
                iscolorRedFont_1: false,
                iscolorRedFont_2: false,
                iscolorRedFont_3: false,
                iscolorRedFont_4: false,
                iscolorRedFont_5: false,
                iscolorRedFont_6: false,
                iscolorRedFont_7: false,
                iscolorRedBorder_1: false,
                iscolorRedBorder_2: false,
                iscolorRedBorder_3: false,
                iscolorRedBorder_4: false,
                iscolorRedBorder_5: false,
                iscolorRedBorder_6: false,
                iscolorRedBorder_7: false,
                warning_1: false,
                warning_2: false,
                warning_3: false,
                warning_4: false,
                warning_5: false,
                warning_6: false,
                warning_7: false,
                warn_1: '出库编号不能为空和只能为数字!',
                warn_2: '出库负责人不能为空或特殊符号!',
                warn_3: '入库时间不能为空!',
                warn_4: '上传文件不能为空或格式不正确(只允许XML格式)!',
                warn_5: '发出方不能为空或特殊符号!',
                warn_6: '出库类型不能为空!',
                warn_7: '收货方地址不能为空!',
                 istipMsg: false,
                intercept: false,
                toPath: '',
                saveBtn:false,
            }
        },
        filters: {

        },
        created: function() {
            this.getDistributor();
        },
        beforeRouteLeave(to, from, next) {
            this.toPath = to.path
            if (this.intercept == false) {
                this.istipMsg = true
            } else if (this.intercept == true) {
                this.istipMsg = false
                next()
            }
        },
        methods: {
            // 返回列表组件
            backLeaveStorage(){
                this.$router.push({
                    path: '/home/leaveStorage'
                })
            },
            cancle: function() {
                this.istipMsg = false
            },
            changePath: function() {
                this.intercept = true
                this.$router.push({
                    path: this.toPath
                })
            },
            // 处理上传文件
            handleFile(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!/\.(xml)$/i.test(files[0].name) || !files.length) {
                    this.iscolorRedFont_4 = this.iscolorRedBorder_4 = this.warning_4 = true;
                    return;
                } else {
                    this.file = files[0];
                    this.fileName = files[0].name;
                }
            },
            // 请求格式化日期
            UnFormatDate(date) {
                let y, m, d, h, i, s,
                    t = new Date(parseInt(date));
                y = t.getFullYear()
                m = t.getMonth() + 1
                d = t.getDate()
                h = t.getHours()
                i = t.getMinutes()
                s = t.getSeconds()
                return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s)
            },
            save() {
                if (this.leaveWarehouseNumber == '' || !/^[0-9]*$/.test(this.leaveWarehouseNumber)) {
                    this.iscolorRedFont_1 = this.iscolorRedBorder_1 = this.warning_1 = true;
                    this.upload = false;
                }
                if (this.leaveWarehouseManager == '' || !/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(this.leaveWarehouseManager)) {
                    this.iscolorRedFont_2 = this.iscolorRedBorder_2 = this.warning_2 = true;
                    this.upload = false;
                }
                if (this.leaveWarehouseDate == '' || this.leaveWarehouseDate == undefined) {
                    this.iscolorRedFont_3 = this.iscolorRedBorder_3 = this.warning_3 = true;
                    this.upload = false;
                }
                if (this.fileName == '') {
                    this.iscolorRedFont_4 = this.iscolorRedBorder_4 = this.warning_4 = true;
                    this.upload = false;
                }
                if (this.sendCompany == '' || !/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/.test(this.sendCompany)) {
                    this.iscolorRedFont_5 = this.iscolorRedBorder_5 = this.warning_5 = true;
                    this.upload = false;
                }
                if (this.leaveWarehouseType == '' || this.leaveWarehouseType == undefined) {
                    this.iscolorRedFont_6 = this.iscolorRedBorder_6 = this.warning_6 = true;
                    this.upload = false;
                }
                if (this.distributorId == '' || this.distributorId == undefined) {
                    this.iscolorRedFont_7 = this.iscolorRedBorder_7 = this.warning_7 = true;
                    this.upload = false;
                }
                if (this.upload == true) {
                    this.saveBtn = true;
                    this.$store.commit('showLoading');
                    let formdata = new FormData();
                    formdata.append('file', this.file)
                    formdata.append('fileName', this.fileName)
                    formdata.append('sendCompany', this.sendCompany)
                    formdata.append('leaveWarehouseDate', this.UnFormatDate(this.leaveWarehouseDate))
                    formdata.append('leaveWarehouseType', this.leaveWarehouseType)
                    formdata.append('leaveWarehouseNumber', this.leaveWarehouseNumber)
                    formdata.append('leaveWarehouseManager', this.leaveWarehouseManager)
                    formdata.append('distributorId', this.distributorId)
                                     
                    this.outStockFileUpload(formdata).then((data) => {
                        console.log(data);
                        if (data.code == 200) {
                            this.$message.success(data.message);
                            this.intercept = true;
                            this.$router.push({
                                path: '/home/leaveStorage'
                            });
                        } else {
                            this.$message(data.message);
                        }
                        this.$store.commit('hiddenLoading');
                        this.saveBtn = false;
                    }).catch(msg => console.log(msg))
                }
            },
            // 查询所有经销商
            getDistributor() {
                this.getAllDistributor().then((data) => {
                    console.log(data)
                    this.companyName = data.data;
                }).catch(msg => console.log(msg))
            },
            ...mapActions(['outStockFileUpload', 'getAllDistributor'])
        },
        watch: {
            leaveWarehouseNumber: function(o) {
                if (o != '') {
                    this.iscolorRedFont_1 = this.iscolorRedBorder_1 = this.warning_1 = false;
                    this.upload = true;
                }
            },
            leaveWarehouseManager: function(o) {
                if (o != '') {
                    this.iscolorRedFont_2 = this.iscolorRedBorder_2 = this.warning_2 = false;
                    this.upload = true;
                }
            },
            leaveWarehouseDate: function(o) {
                if (o != '' && o != undefined) {
                    this.iscolorRedFont_3 = this.iscolorRedBorder_3 = this.warning_3 = false;
                    this.upload = true;
                }
            },
            fileName: function(o) {
                if (o != '') {
                    this.iscolorRedFont_4 = this.iscolorRedBorder_4 = this.warning_4 = false;
                    this.upload = true;
                }
            },
            sendCompany: function(o) {
                if (o != '') {
                    this.iscolorRedFont_5 = this.iscolorRedBorder_5 = this.warning_5 = false;
                    this.upload = true;
                }
            },
            leaveWarehouseType: function(o) {
                if (o != '' && o != undefined) {
                    this.iscolorRedFont_6 = this.iscolorRedBorder_6 = this.warning_6 = false;
                    this.upload = true;
                }
            },
            distributorId: function(o) {
                if (o != '' && o != undefined) {
                    this.iscolorRedFont_7 = this.iscolorRedBorder_7 = this.warning_7 = false;
                    this.upload = true;
                }
            }
        }
    }

</script>
<style scoped>
    .commenNav {
        display: inherit;
    }
    
    .stockNav {
        cursor: pointer;
        width: 132px;
        height: 50px;
        line-height: 50px;
        padding-left: 38px;
        float: left;
    }
    
   .basicInfo {
        margin-top: 10px;
        background: #fff;
        padding: 20px 0 0 40px;
        height: calc(100vh - 150px);
        overflow-x: hidden;
    }
    
    .basicInfo>div>div {
        float: left;
        padding-left: 40px;
    }

        
    .stockIcon {
        width: 24px;
        height: 24px;
        margin: 13px 10px 13px 0;
        overflow: hidden;
        float: left;
    }
     .lastBox {
        border-bottom: 1px solid #DDD;
        padding-bottom: 30px;
    }
    .catalogBox {
        float: left;
        height: 50px;
        line-height: 50px;
    }
   
    .basicInfo input {
        width: 180px;
        height: 32px;
        border: 1px solid #DDD;
        border-radius: 5px;
        padding-left: 10px;
        background-color: #fff;
    }
    

    input {
        font-size: 14px
    }
 
    .basicInfo>div {
        margin: 25px 0;
        overflow: hidden;
    }
    
    .box {
        width: 280px;
        height: 32px;
        line-height: 32px;
    }
    
    .box span {
        float: right;
        color: #333;
    }
    
    .box input {
        padding: 0 5px;
        margin-left: 40px;
    }
    
    .el-date-editor.el-input {
        width: 182px;
        position: absolute;
        top: -2px;
        left: -1px;
    }
    
    .el-select {
        position: absolute;
        top: -2px;
        left: -1px;
    }
    
    .pickBox {
        height: 32px;
        width: 180px;
        overflow: hidden;
        position: relative;
        border: 1px solid #dddddd;
        border-radius: 5px;
        margin-left: 40px;
    }
    
    .selectPickBox1 {
        width: 160px;
    }
    
    .selectPickBox2 {
        width: 320px;
    }
    
    .selectPickBox1,
    .selectPickBox2 {
        height: 32px;
        overflow: hidden;
        position: relative;
        border: 1px solid #dddddd;
        border-radius: 5px;
        margin-left: 40px;
    }
    
    .selectPickBox1 .el-select {
        width: 162px;
    }
    
    .selectPickBox2 .el-select {
        width: 322px;
    }
    
    .button {
        width: 150px;
        color: #fff;
        background: #43dce7;
        border-radius: 5px;
        margin-left: 323px;
        height: 32px;
        border: none;
    }
    
    .uploadButton {
        width: 80px;
        height: 32px;
        line-height: 30px;
        background-color: #fff;
        border: 1px solid #43DCE7;
        border-radius: 5px;
        box-sizing: border-box;
        color: #43DCE7;
        margin-left: 20px;
        text-align: center;
        font-weight: inherit;
        cursor: pointer;
    }
    
    .colorRedFont {
        color: #E74343!important;
    }
    
    .colorRedBorder {
        border: 1px solid #E74343!important;
    }
    
    .warnStyle {
        line-height: 32px;
        margin-left: 10px;
        color: #E74343;
    }
    .specialMain{
        height: calc(100vh - 90px);
    }
</style>
